<template>
    <div class="home-box">
        <div class="home-left">
            <div class="left-nav">
                <span class="nav-blue">●</span><span>支付方式</span>
            </div>
            <div class="left-msg">
                <img src="../../assets/touxiang.jpg" alt="">
                <input type="text" placeholder="请输入金额">
            </div>
            <div class="left-msg">
                <img src="../../assets/touxiang.jpg" alt="">
                <input type="text" placeholder="请输入金额">
            </div>
            <div class="left-msg">
                <img src="../../assets/touxiang.jpg" alt="">
                <input type="text" placeholder="请输入金额">
            </div>
            <div class="left-msg">
                <img src="../../assets/touxiang.jpg" alt="">
                <input type="text" placeholder="请输入金额">
            </div>
            <div class="left-msg">
                <img src="../../assets/touxiang.jpg" alt="">
                <input type="text" placeholder="请输入金额">
            </div>
        </div>
        <div class="home-right">
            <div class="right-top">
                <div class="top-msg">
                    <p>应收</p>
                    <span>{{detailsData[0].totalorderPrice}}</span>
                </div>
                <div class="top-msg">
                    <p>实收</p>
                    <span>￥{{detailsData[0].totalorderPrice}}</span>
                </div>
                <div class="top-msg">
                    <p>找零</p>
                    <span>￥00</span>
                </div>
            </div>
            <div class="right-content">
                <div class="content-left">
                    <div class="content-l-msg">7</div>
                    <div class="content-l-msg">8</div>
                    <div class="content-l-msg">9</div>
                    <div class="content-l-msg"><i class="el-icon-delete"></i></div>
                    <div class="content-l-msg">4</div>
                    <div class="content-l-msg">5</div>
                    <div class="content-l-msg">6</div>
                    <div class="content-l-msg">￥50</div>
                    <div class="content-l-msg">1</div>
                    <div class="content-l-msg">2</div>
                    <div class="content-l-msg">3</div>
                    <div class="content-l-msg">￥50</div>
                    <div class="content-l-msg">7</div>
                    <div class="content-l-msg">7</div>
                    <div class="content-l-msg">7</div>
                    <div class="content-l-msg">￥50</div>
                </div>
                <div class="content-right">
                    <div class="content-r-msg" @click="go">完<br>成</div>
                    <div class="content-r-msg">取<br>消</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("order");
    export default {
        data() {
            return {
            }
        },
         computed: {
    ...mapState(["detailsData"]),
  },
  methods:{
      go(){
          this.$router.push('order')
          
      }
  }
    }
    
</script>

<style lang="scss" scoped>



    .home-box {
        width: 1024px;
        /* height: 200px; */
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        background-color: #EFF2F6;
    }

    .home-left{
        width: 47%;
        background-color: #fff;
        border-radius: 5px;
    }

    .home-right{
        width: 47%;
    }

    .left-nav {
        line-height: 50px;
        text-align: left;
        padding-left: 40px;
    }

    .nav-blue {
        color: #2889FF;
    }

    .left-msg {
        width: 100%;
        height: 100px;
        margin: 0 auto;
    }

    .left-msg > img {
        width: 50px;
        height: 50px;
        border-radius: 4px;
        vertical-align: middle;
        margin-right: 30px;
    }

    .left-msg > input {
        background-color: #EEEEEE;
        width: 200px;
        height: 30px;
        border: none;
    }

    .right-top {
        width: 100%;
        height: 100px;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 5px;
    }

    .top-msg {
        width: 33%;
        height: 100px;
        line-height: 50px;
    }

    .right-content {
        width: 100%;
        height: 450px;
        display: flex;
        font-size: 25px;
        font-weight: 600;
        /* justify-content: space-around; */
        /* align-items: center; */
    }

    .content-left {
        width: 80%;
        height: 450px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    .content-l-msg {
        width: 21%;
        height: 80px;
        text-align: center;
        line-height: 80px;
        background-color: #fff;
        border-radius: 5px;
    }

    .content-l-msg:nth-child(8) {
        color: white;
        background-image: linear-gradient(180deg, #FDD9A2, #E89653);
    }

    .content-l-msg:nth-child(12) {
        color: white;
        background-image: linear-gradient(180deg, #FDD9A2, #E89653);
    }

    .content-l-msg:nth-child(16) {
        color: white;
        background-image: linear-gradient(180deg, #FDD9A2, #E89653);
    }

    .content-right {
        width: 20%;
        height: 450px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    .content-r-msg {
        width: 80%;
        height: 195px;
        text-align: center;
        line-height: 95px;
        background-color: #fff;
        border-radius: 5px;
    }

    .content-r-msg:nth-child(1) {
        color: white;
        background-image: linear-gradient(180deg, #81DAFB, #2A8BFF);
    }
</style>